<script setup>
import {computed, ref} from "vue";
import SendMsg from "@/components/SendMsg.vue";
import {ElMessage} from "element-plus";
import {httpPost} from "@/utils/http.js";
import {validateEmail, validateMobile} from "@/utils/validate.js";

const props = defineProps({
  show: Boolean, // 控制弹框是否显示
  mobile: String,
})

const showDialog = computed(() => {
  return props.show
})

const title = ref('重置密码')
const form = ref({
  mobile: '', //手机号
  email: '', // 邮箱
  type: 'mobile', // 类型：mobile or email
  code: '', // 验证码
  password: '', // 密码
  repass: '' // 重置密码
})

const emits = defineEmits(['hide'])

// 发送重置验证码请求
const save = () => {
  // 校验参数是否合法
  if(form.value.type === 'mobile' && (form.value.mobile === '' || !validateMobile(form.value.mobile))) {
    return ElMessage.error('请输入合法的手机号')
  }
  if(form.value.type === 'email' && (form.value.email === '' || !validateEmail(form.value.email))) {
    return ElMessage.error('请输入合法的邮箱地址')
  }
  if(form.value.code === '') {
    return ElMessage.error('请输入验证码')
  }

  if(form.value.password.length < 8) {
    return ElMessage.error('密码长度必须大于8位')
  }

  if(form.value.password !== form.value.repass) {
    return ElMessage.error('两次输入密码不一致')
  }

  httpPost('api/user/reset_pass',form.value).then(() => {
    ElMessage.success({
      message: '重置密码成功',
      duration: 500,
      // 弹框关闭后触发 hide 方法
      onClose: () => emits('hide',false)
    })
  }).catch(e => {
    ElMessage.error('重置密码失败：'+e.message)
  })
}

const close = () => {
  emits('hide',false)
}

</script>

<template>
  <div class="reset-pass">
    <el-dialog v-model="showDialog" :close-on-click-modal="true" width="500px" :before-close="close" :title="title" class="reset-pass-dialog">
      <div class="form">
        <el-form :model="form" label-width="80px" label-position="left">
          <el-tabs v-model="form.type" class="demo-tabs">
            <el-tab-pane label="手机号验证" name="mobile">
              <el-form-item label="手机号">
                <el-input v-model="form.mobile" placeholder="请输入手机号"/>
              </el-form-item>
              <el-form-item label="验证码">
                <div class="flex">
                  <el-input v-model="form.code" placeholder="验证码" maxlength="6" class="mr-2 w-1/2"/>
                  <send-msg size="" :receiver="form.mobile" type="mobile" />
                </div>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="邮箱验证" name="email">
              <el-form-item label="邮箱地址">
                <el-input v-model="form.email" placeholder="请输入邮箱地址"/>
              </el-form-item>
              <el-form-item label="验证码">
                <div class="flex">
                  <el-input v-model="form.code" placeholder="验证码" maxlength="6" class="mr-2 w-1/2"/>
                  <send-msg size="" :receiver="form.email" type="email" />
                </div>
              </el-form-item>
            </el-tab-pane>
          </el-tabs>
          <el-form-item label="新密码">
            <el-input v-model="form.password" placeholder="请输入密码(8-16位)" type="password"/>
          </el-form-item>
          <el-form-item label="重复密码">
            <el-input v-model="form.repass" placeholder="重复密码(8-16位)" type="password"/>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="save" round>重置密码</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="stylus">
.reset-pass {
  .form {
    padding 0 20px
  }

  .code-row {
    width 100%

    .send-button {
      padding-left 10px
    }
  }

  .reset-pass-dialog {
    .el-dialog__footer {
      text-align center
      padding-top 0
    }

    .el-dialog__body {
      padding 0
    }
  }
}
</style>